<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>程序人生</title>
    <script src="../js/BSKPublickFunction.js" type="text/javascript"></script>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <style>

        #blogList{
            list-style: none;
            padding: 0;
        }
        .blogItem{
            height: 150px;
            border-bottom: 1px solid rgba(255,255,255,1);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
            background-color: rgba(255, 255, 255, 0.0);
            margin: 15px 5px 15px 5px;
            padding: 10px;
        }
        .blogTitle{
            height: 20px;
            margin: 10px 5px 10px 5px;
            color: white;
        }
        .blogTime{
            font-size: 15px;
            margin: 0 5px 5px 0;
            color: #dddddd;
        }
        .blogTagContainer{
            height: 40px;
            margin: 10px 5px 10px 5px;
        }
        .blogTag{
            padding: 1px 5px 1px 5px;
            background-color: white;
            color: #000000;
            border: 1px solid #abdcf5;
            border-radius:5px ;
        }
        .blogPreviewText{
            height: 65px;
            overflow: hidden;
            margin: 10px 5px 10px 5px;
            color: #e1e1e1;
        }
    </style>
    <script>

        $ (function () {
            var blogItemsArray = getElementsByClassName(document.body,"blogItem");
            for(var i = 0;i<blogItemsArray.length;i++){
                var blogitem = blogItemsArray[i];
                blogitem.alpha =0.0;
                blogitem.style.borderRadius = 0;
                blogitem.addEventListener("click",function () {
                    var item = this;
                    AnimatedObjEasyinout(item,{borderRadius:20});
                    clearInterval(item.atimer);
                    item.atimer = setInterval(function () {
                        item.alpha +=0.03;
                        if(item.alpha >= 0.3){
                            item.alpha = 0.3;
                            clearInterval(item.atimer);
                            blogitemclick();
                        }
                        item.style.backgroundColor = "rgba(255, 255, 255,"+item.alpha+")";
                        item.style.boxShadow = "0 4px 10px rgba(0, 0, 0,"+item.alpha+")";
                        item.style.borderBottom = "1px solid rgba(255,255,255,"+(0.3-item.alpha)/0.3+")"
                    },30);
                },false);
            }
        });

        function blogitemclick() {
            var fram = parent.document.getElementById("contentIFrame");
            parent.mdurl="123.md";
            fram.src = "BlogDetail.html";
            parent.scrollToTop();
        }
    </script>
</head>
<body>
<ul id="blogList">
    <li class="blogItem" >
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp> <br> <samp class="blogTag">ObjectivC</samp> <samp class="blogTag">ios</samp> <samp class="blogTag">总结</samp> <samp class="blogTag">笔记</samp> <samp class="blogTag">ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要</p>
    </li>
    <li class="blogItem">
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp>  <br> <samp class="blogTag">ObjectivC</samp> <samp class="blogTag" >ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
    </li>
    <li class="blogItem">
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp>  <br> <samp class="blogTag">ObjectivC</samp> <samp class="blogTag" >ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
    </li>
    <li class="blogItem">
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp>  <br> <samp class="blogTag">ObjectivC</samp> <samp class="blogTag" >ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要</p>
    </li>
    <li class="blogItem">
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp> <br>  <samp class="blogTag">ObjectivC</samp> <samp class="blogTag" >ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
    </li>
    <li class="blogItem">
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp> <br>  <samp class="blogTag">ObjectivC</samp> <samp class="blogTag" >ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要</p>
    </li>
    <li class="blogItem">
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp> <br>  <samp class="blogTag">ObjectivC</samp> <samp class="blogTag" >ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要</p>
    </li>
    <li class="blogItem">
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp>  <br> <samp class="blogTag">ObjectivC</samp> <samp class="blogTag" >ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要</p>
    </li>
    <li class="blogItem">
        <h2 class="blogTitle">标题</h2>
        <p class="blogTagContainer" > <samp class="blogTime">2016-12-4</samp> <br>  <samp class="blogTag">ObjectivC</samp> <samp class="blogTag" >ObjectivC</samp></p>
        <p class="blogPreviewText">摘要摘要摘要</p>
    </li>
</ul>
</body>
</html>